import styled from 'styled-components'
import { useCallback, useMemo } from 'react'
import ScrollView from '../../component/ScrollView'
import Cell from '../../component/Cell'
import IconAvatar from '../../asserts/avatar_default.png'
import { formatBase64Image } from '../../utils/common'
import { RankInfo, RankType } from '../../service'
import { useTranslation } from 'react-i18next'
import Icon from '../../component/Icon'
import Empty from '../../component/Empty'
import IconTeamEmpty from '../../asserts/tab_team_normal.png'
import IcoPeople from '../../asserts/rank_people.png'

interface Props {
    data?: RankInfo,
    type: RankType
}

const Container = styled(ScrollView)`
    padding: .25rem .625rem;
    box-sizing: border-box;
`

const ItemBox = styled.div`
    margin-bottom: .625rem;
    position: relative;
`

const Item = styled(Cell)`
    padding: .8125rem 1rem !important;
    background-color: #315C9C !important;
`

const IconBox = styled(Icon)`
    width: 3.125rem;
    aspect-ratio: 1;
    border-radius: 50%;
`

const PrefixBox = styled.div`
    min-width: 2.625rem;
    margin-right: .5rem;
    display: flex;
    align-items: center;
    justify-content: start;

`

const RankText = styled.span`
    font-weight: 400;
    font-size: .875rem;
    color: #ffffffd0;
`

const NumBox = styled.span<{ $marginLeft?: string, $width?: string }>`
    color: #A3F7FF;
    font-size: .875rem;
    font-weight: 400;
    margin-left: ${({ $marginLeft }) => $marginLeft};
    width: ${({ $width }) => $width};
    text-align: start;
`

const SubTitle = styled.span`

`

const RightItme = styled.div`
    display: flex;
    align-items: center;
`

const Reward = styled.div`
    position: absolute;
    right: 0;
    top: 0;
    font-size: .75rem;
    padding: .25rem .5rem;
    box-sizing: border-box;
    color: #FEA327;
    font-weight: bold;
`

const RankIcon: { [key: number]: string } = {
    1: 'ranking_one',
    2: 'ranking_two',
    3: 'ranking_three'
}

const Prefix: React.FC<{ num: number }> = ({ num }) => {
    const element = useCallback(() => {
        const name = RankIcon[num]
        if (!name) {
            return <RankText>{num !== 0 ? `${num}`.padStart(2, '0') : ''}</RankText>
        }

        return <Icon
            name={name}
            type='webp'
            width='1.4375rem'
        />

    }, [num])
    return <PrefixBox>
        {element()}
    </PrefixBox>
}


const List: React.FC<Props> = ({ data, type }) => {
    const { t } = useTranslation()
    const list = useMemo(() => {
        if (!data) {
            return []
        }
        return data.items
    }, [data])

    const fetchData = useCallback(async () => {
        return false
    }, [])

    const showSubTitle = useMemo(() => (type === RankType.Detector), [type])

    return <Container fetchData={fetchData}>
        {!list?.length ? <Empty
            icon={IconTeamEmpty}
            subTitle={t('empty.popularize')}
            style={{ marginTop: '20%', paddingBottom: '0' }}
        /> : list.map((item, idx) => <ItemBox key={idx}>
            <Item
                title={item.nickName}
                subTitle={
                    showSubTitle &&
                    <SubTitle>
                        {`${t(`ranking.item.${type}`)} `}
                        <NumBox>{item.num}</NumBox>
                    </SubTitle>}
                prefix={<Prefix num={item.serNo} />}
                rightItem={
                    !showSubTitle && <RightItme>
                        <Icon
                            src={IcoPeople}
                            width='0.875rem'
                        />
                        <NumBox
                            $marginLeft='0.5rem'
                            $width='3.375rem'
                        >{item.num}</NumBox>
                    </RightItme>
                }
                icon={
                    <IconBox
                        src={item.image ? formatBase64Image(item.image) : IconAvatar}
                    />
                }
            />
            {item.reward && <Reward>{item.reward}</Reward>}
        </ItemBox>)}
    </Container>
}

export default List